<template>
  <div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" href=""
          ><img src="../assets/logo/logo2.png"
        /></a>
      </div>

      <ul class="nav navbar-top-links navbar-right">
        <li>
          <img :src="avatar" class="lxrm" />
          <a href="#"> {{ nickName }}</a>
        </li>
      </ul>
    </nav>

    <div id="page-wrapper">
      <div id="page-inner">
        <div class="row"> 
             <el-alert
             v-if="list.length==0"
    title="您没有系统相关权限,需等待分配！"
    type="warning">
  </el-alert> 
          <div class="col-md-3 col-sm-12 col-xs-12" v-for="system in list" :key="system.menuId">
            <div
              class="panel panel-primary text-center no-boder bg-color-green"
            >
              <div class="panel-body"> 
                <svg-icon slot="prefix" style="width:2.5em;height:2.5em" :icon-class="system.icon" class="el-input__icon input-icon" />
                <h3 class="ays">{{system.menuName}}</h3>
                <p>
                  {{system.remark}}
                </p>
              </div>
              <a :href="system.path"><div class="panel-footer back-footer-green">
                立即进入
              </div></a>
            </div>
          </div>
           
        </div> 

        <footer>
          <p  style="text-align:center">
            Copyright &copy; 2021.Company name All rights reserved.<a
              target="_blank"
              href=""
              >喵喵系统所有</a
            >
          </p>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getSystems } from "@/api/menu";

export default {
  name: "MainNav",
  data() {
    return {
      list: [],
    };
  },
  computed: {
    ...mapGetters(["nickName", "avatar"]),
  },
  created() {

      this.initSystem();
  },
  methods: {
    initSystem() {
      getSystems()
        .then((res) => {
          this.list = res.data;
        })
        .catch(() => {
          this.$message.info("系统信息获取失败!");
        });
    },
  },
};
</script>


<style   type="text/css" >
@import "../assets/css/bootstrap.css";
@import "../assets/css/custom-styles.css";
</style>